<template>
  <div class="app-page-banner" :class="className">
    <div class="banner-text">
      <div class="title">{{ title }}</div>
      <div class="feature">
        <el-space spacer="•">
          <span v-for="f in feature" :key="f">{{ f }}</span>
        </el-space>
      </div>
      <div class="contribute">
        <NuxtLink v-if="btnUrl" :href="btnUrl" target="_blank">
          <button class="admin-btn">{{ label }}</button>
        </NuxtLink>
        <button v-else class="admin-btn" @click="onSubmit">{{ label }}</button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
export interface ToolBarProps {
  feature?: any
  title: string
  label?: string
  className?: string
  btnUrl?: string
}

const props = withDefaults(defineProps<ToolBarProps>(), {
  className: '',
  feature: ['上手简单', '风格多样', '灵活组合'],
  title: '海量实用的管理模板集合',
  label: '提交你的管理模板',
  btnUrl: '',
})

const { title, feature, label, className } = toRefs(props)
const emit = defineEmits(['handleSubmit'])
const onSubmit = () => {
  emit('handleSubmit')
}
</script>
<style lang="scss">
.app-page-banner {
  height: 225px;
  text-align: center;
  background-size: cover;
  color: #fff;
  overflow: hidden;
  .banner-text {
    .title {
      font-size: 28px;
      color: #fff;
      text-shadow: 0 5px 10px #6e55b5;
      margin: 50px 0 16px;
      line-height: 1;
    }
    .feature {
      font-size: 13px;
      font-weight: lighter;
      margin-bottom: 30px;
      opacity: 0.8;
      letter-spacing: 0.1em;
    }
    .admin-btn {
      border-radius: 100px;
      background: #fff;
      padding: 0 30px;
      height: 40px;
      color: #876fd2;
      border: 0;
      box-shadow: 0 0 16px #6e55b5;
      transition: all 0.3s;
      margin-bottom: 56px;
      cursor: pointer;
      &:hover {
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
      }
    }
  }
}
</style>
